<template>
    <basic-container>
        <el-container style="height:100%;">
            <el-header style="border-bottom:1px solid #eeeeee;">
                <el-menu class="el-menu-demo" mode="horizontal"
                         :default-active="menu.type"
                         @select="handleMenuTypeSelect">
                    <el-menu-item index="1">
                        前台菜单
                    </el-menu-item>
                    <el-menu-item index="2">
                        系统菜单
                    </el-menu-item>
                </el-menu>
            </el-header>
            <el-container>
                <el-aside style="width:280px;border-right:1px solid #eeeeee;">
                    <el-tree style="margin-top:5px;"
                             :data="menu.data"
                             node-key="id"
                             highlight-current
                             default-expand-all
                             :expand-on-click-node="false"
                             :render-content="handleRenderContent"
                             @node-click="handleNodeClick"></el-tree>
                </el-aside>
                <el-main>
                    <avue-form ref="editForm" style="width:800px;"
                               :option="form.option"
                               :permission="permission"
                               v-model="form.obj"
                               @submit="handleSubmit">
                        <template slot="menuForm">
                            <el-button @click="handleDel" v-if="permission.delBtn">删除</el-button>
                        </template>
                    </avue-form>
                </el-main>
            </el-container>
        </el-container>
    </basic-container>
</template>

<script>
    import { getTreeData, getFormOption, createAt, updateAt, deleteAt } from "./api"

    let thatFormOption = getFormOption()

    export default {
        name: "menu",
        data() {
            return {
                permission: {},
                options: [],
                menu: {
                    type: '1',
                    data: []
                },
                form: {
                    option: thatFormOption,
                    obj: {}
                }
            }
        },
        created() { },
        mounted() {
            this.handleTreeData()
        },
        computed: {},
        watch: {
            options() {
                let btns = {
                    viewBtn: false,
                    addBtn: false,
                    delBtn: false,
                    editBtn: false
                }
                this.options.forEach((opt) => {
                    switch (opt) {
                        case 'view':
                            btns.viewBtn = true
                            break
                        case 'create':
                            btns.addBtn = true
                            break
                        case 'delete':
                            btns.delBtn = true
                            break
                        case 'update':
                            btns.editBtn = true
                            break
                    }
                })
                this.permission = btns
            }
        },
        props: [],
        methods: {
            handleTreeData() {
                getTreeData({ type_id: this.menu.type - 1 })
                    .then(res => {
                        this.menu.data = res.data.data
                        this.options = res.data.permissions
                    })
            },
            handleRenderContent(h, { node, data }) {
                return (
                    <span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
                        <span>
                            <span>{node.label}</span>
                        </span>
                        <span>
                            <span>{data.sort}&nbsp;</span>
                            <el-button style="font-size: 12px;" type="text" on-click={() => this.handleFormAdd(data)} v-if="permission.addBtn">新增子菜单</el-button>
                        </span>
                    </span>
                )
            },
            handleMenuTypeSelect(type) {
                this.menu.type = type
                this.handleTreeData()
            },
            handleNodeClick(data) {
                this.form.obj = data;
            },
            handleFormAdd(data) {
                //事件冒泡 阻止
                event.cancelBubble = true
                this.form.obj = {
                    parent_id: data.id,
                    parent_label: data.label,
                    sort: 99,
                    id: 0,
                    label: "",
                    icon: "el-icon-info",
                    path: "",
                    component: "",
                    option_ids: ""
                }
            },
            /**
             * 获取提交数据
             */
            getSubmitData() {
                let obj = this.form.obj
                let optionList = null
                if (obj.option_ids) {
                    optionList = obj.option_ids instanceof Array ? obj.option_ids : obj.option_ids.split(',')
                }
                return {
                    id: obj.id,
                    type_id: obj.type_id,
                    label: obj.label,
                    icon: obj.icon,
                    path: obj.path,
                    component: obj.component,
                    sort: obj.sort,
                    parent_id: obj.parent_id,
                    option_list: optionList
                }
            },
            /**
             * 提交按钮
             */
            handleSubmit(form, done) {
                const parameter = this.getSubmitData()
                //修改
                if (this.form.obj.id) {
                    updateAt(parameter).then(() => {
                        this.handleTreeData()
                        this.$refs.editForm.resetForm()
                        this.$message({
                            showClose: true,
                            message: "修改成功",
                            type: "success"
                        })
                        done()
                    })
                }
                //新增
                else {
                    createAt(parameter).then(() => {
                        this.handleTreeData()
                        this.$refs.editForm.resetForm()
                        this.$message({
                            showClose: true,
                            message: "添加成功",
                            type: "success"
                        })
                    })
                }
            },
            /**
             * 删除按钮
             */
            handleDel() {
                const obj = this.form.obj
                this.$confirm(`是否确认删除名为 '${obj.label}' 的菜单及其子菜单？`, "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    deleteAt(obj).then(() => {
                        this.handleTreeData()
                        this.$refs.editForm.resetForm()
                        this.$message({
                            showClose: true,
                            message: "删除成功",
                            type: "success"
                        })
                    })
                }).catch(() => { })
            }


        }
    }
</script>

<style lang="scss" scoped>
    .el-tree .el-tree-node__content {
        height: 32px !important;
    }

    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 480px;
    }

    .avue-form {
        margin: 20px 0 0 10px;
    }
</style>
